<template>
  <view class="formPage">
    <view class="step">
      <uni-steps
        active-color="#ffffff"
        :options="[{ title: '提交信息' }, { title: '提交材料' }]"
        :active="0"
      ></uni-steps>
    </view>
    <view class="user">
      <view class="inputBox">
        <span class="name lineHeight86">为谁申请</span>
        <view class="content">
          <span
            v-for="item in applyForUser"
            :key="item.id"
            :class="[item.insuredId === illFormData.patientId ? 'cur' : '']"
            @click="
              () => {
                choseApplyForUser(item);
              }
            "
          >
            {{ item.insuredName }}
            <img v-if="item.insuredId === illFormData.patientId" class="curPostion" :src="curIcon"
          /></span>
        </view>
        <view class="clear"></view>
      </view>
    </view>
    <view class="userInfoDom">
      <view class="inputBox">
        <span class="name lineHeight86">患病现状</span>
        <view class="content">
          <span
            v-for="item in dead"
            :key="item.id"
            :class="[item.id === illFormData.dead ? 'cur' : '']"
            @click="choseBead(item)"
          >
            {{ item.name }}
            <img v-if="item.id === illFormData.dead" class="curPostion" :src="curIcon" />
          </span>
        </view>
        <view class="clear"></view>
      </view>
      <view class="inputBox">
        <span class="name lineHeight86">住院情况</span>
        <view class="content">
          <span
            v-for="item in isHospital"
            :key="item.id"
            :class="[item.id === illFormData.beInHospital ? 'cur' : '']"
            @click="choseIsHospital(item)"
          >
            {{ item.name }}
            <img v-if="item.id === illFormData.beInHospital" class="curPostion" :src="curIcon" />
          </span>
        </view>
        <view class="clear"></view>
      </view>
      <view class="inputBox">
        <span class="name lineHeight86">确诊疾病</span>
        <view class="content tips" @click="choseSick"> 请点此选择疾病 </view>
        <view class="clear"></view>
      </view>
      <view class="illList">
        <span v-for="(item, index) in illFormData.diseases" :key="index">
          {{ item.diseaseName }}
          <view class="illDeleteBtn" @click="deleteIll(index)"><img :src="closeIcon" /></view>
        </span>
      </view>
      <view class="inputBox inputBox-hostipal">
        <span class="name lineHeight86">确诊医院</span>
        <view class="content">
          <input
            v-model="illFormData.hospitalName"
            class="uni-input lineHeight86"
            name="name"
            maxlength="20"
            placeholder="请点此输入医院名称"
            placeholder-class="phcolor"
          />
        </view>
        <view class="clear"></view>
      </view>
      <view class="inputBox">
        <span class="name lineHeight86">诊断描述</span>
        <view class="clear"></view>
        <view class="textareaDom">
          <textarea
            v-model="illFormData.diagnose"
            maxlength="200"
            placeholder-style="color:#999"
            placeholder="请描述患病情况、事故经过、诊断过程(包含确诊时间、确诊医院、确诊疾病、诊疗情况等)不少于20字"
          />
        </view>
        <view class="clear"></view>
      </view>
    </view>
    <view class="phoneDom">
      <view class="inputBox">
        <span class="name lineHeight66">手机号码</span>
        <view class="content">
          <input
            v-model="illFormData.phone"
            type="number"
            class="uni-input lineHeight66"
            name="name"
            placeholder="请输入手机号"
            placeholder-class="phcolor"
          />
        </view>
        <view class="clear"></view>
      </view>
    </view>
    <view v-if="applyForUser.length > 0" class="uni-btn-v">
      <button form-type="submit" @click="submitData">提交信息</button>
    </view>
    <view v-else class="uni-btn-v">
      <button class="disable" form-type="submit" @click="submitData">提交信息</button>
    </view>
    <view v-if="sickVisible" class="popDom">
      <sickListPage
        :sickAllList="null"
        :listData="illFormData.diseases"
        @popClose="popClose"
        @popCenter="popCenter"
        @choseSickSearch="choseSickSearch"
      ></sickListPage>
    </view>
  </view>
</template>

<script>
import { getCanAssistanceApply } from '@/api/join.js';
import { getPatientId } from '@/utils/auth.js';
import { isPhone } from '@/utils/validate.js';
import sickListPage from '@/components/sickListPageLoad';
import curIcon from '@/static/icon/cur.png';
export default {
  components: {
    sickListPage
    // cityCom
  },
  data() {
    return {
      closeIcon:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/icon/close.png',
      testIcon: 'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/weixin-static/insurance/ysgc.jpg',
      illFormData: {
        patientId: '', // 患者id
        patientName: '', // 患者姓名
        beInHospital: '', // 是否在医院 1在 0已出院
        dead: '', // 是否死亡 1死亡 0未死亡
        hospitalName: '', // 确诊机构
        phone: '', // 手机号
        diagnose: '', // 诊断描述
        pics: [], // 确诊材料
        diseases: [] // 确诊疾病
      },
      curIcon: curIcon,
      applyForUser: [
        // {
        //   teamOrderId: 100,
        //   insuredId: 0,
        //   insuredName: '李珊珊',
        //   relationWithInsurer: '2'
        // }
      ],
      dead: [
        {
          id: 0,
          name: '在世'
        },
        {
          id: 1,
          name: '身故'
        }
      ],
      isHospital: [
        {
          id: 1,
          name: '住院中'
        },
        {
          id: 0,
          name: '已出院'
        }
      ],
      sickVisible: false,
      sickList: []
    };
  },
  onLoad() {},
  mounted() {
    this.getCanAssistanceApplyObj();
  },
  methods: {
    getCanAssistanceApplyObj() {
      const patientId = wx.getStorageSync('patientid');
      getCanAssistanceApply(patientId).then((res) => {
        if (res.code === 0) {
          this.applyForUser = [...new Set([...res.data])];
        }
      });
    },
    choseApplyForUser(val) {
      console.log('choseApplyForUser val:', val);
      this.illFormData.patientId = val.insuredId;
      this.illFormData.patientName = val.insuredName;
      this.illFormData.teamOrderId = val.teamOrderId;
    },
    choseBead(val) {
      this.illFormData.dead = val.id;
    },
    choseIsHospital(val) {
      this.illFormData.beInHospital = val.id;
    },
    choseSick() {
      this.sickVisible = true;
    },
    popCenter() {
      this.sickVisible = false;
    },
    popClose() {
      this.sickVisible = false;
    },
    choseSickSearch(val) {
      this.sickVisible = false;
      let indexs = '';
      // if (this.sickList.length < 1) {
      //   this.sickList.push(val);
      //   let illItem = [];
      //   this.sickList.forEach((item) => {
      //     illItem.push({ diseaseId: item.id, diseaseName: item.name });
      //   });
      //   console.log('选择了', illItem);
      //   this.illFormData.diseases = illItem;
      //   return;
      // }
      this.illFormData.diseases.forEach((item, index) => {
        if (item.diseaseId === val.id) {
          indexs = index;
          // this.sickList.splice(index, 1);
        }
      });
      if (!indexs && indexs !== 0) {
        this.sickList.push(val);
      } else {
        uni.showToast({ title: `${val.name}已经选择过了`, icon: 'none' });
        return;
      }
      let illItem = [];
      this.sickList.forEach((item) => {
        illItem.push({ diseaseId: item.id, diseaseName: item.name });
      });
      this.illFormData.diseases = illItem;
    },
    submitData() {
      if (!this.illFormData.patientId) {
        uni.showToast({ title: '请选择为谁申请', icon: 'none' });
        return;
      }
      if (!this.illFormData.dead && this.illFormData.dead !== 0) {
        uni.showToast({ title: '请选择是否在世', icon: 'none' });
        return;
      }
      if (!this.illFormData.beInHospital && this.illFormData.beInHospital !== 0) {
        uni.showToast({ title: '请选择是否住院', icon: 'none' });
        return;
      }
      if (this.illFormData.diseases.length < 1) {
        uni.showToast({ title: '请选择确诊疾病', icon: 'none' });
        return;
      }
      if (!this.illFormData.hospitalName) {
        uni.showToast({ title: '请输入确诊医院', icon: 'none' });
        return;
      }
      if (!this.illFormData.diagnose || this.illFormData.diagnose.length < 20) {
        uni.showToast({ title: '请输入不少于20字的诊断描述', icon: 'none' });
        return;
      }
      if (!this.illFormData.phone || !isPhone(this.illFormData.phone)) {
        uni.showToast({ title: '请输入正确手机号', icon: 'none' });
        return;
      }
      this.illFormData.applyPatientId = getPatientId();
      this.$store.commit('join/SET_STOREILLFORMDATA', this.illFormData);
      this.$wxPromise.navigateTo({
        url: '/pages/getWelfareGold/uploadPage'
      });
    },
    deleteIll(val) {
      this.illFormData.diseases.splice(val, 1);
      this.sickList.splice(val, 1);
      console.log('疾病', this.sickList);
    }
  }
};
</script>
<style>
page {
  background-color: #f4f4f4;
}
.formPage .uni-steps__row .uni-steps__row-title {
  font-size: 38rpx !important;
  margin-bottom: 20rpx;
}
.formPage .uni-steps__row :last-child .uni-steps__row-title {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 38rpx !important;
  margin-bottom: 20rpx;
}
.formPage textarea {
  width: auto !important;
  padding: 10rpx;
  height: 100rpx !important;
}
.uni-btn-v button {
  border: none !important;
}
button:after {
  border: none !important;
}
</style>
<style lang="scss">
.formPage {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .step {
    padding: 50rpx 80rpx;
    background: #f96a6a;
  }
  .user {
    background: #fff;
    margin: 24rpx;
    border-radius: 16rpx;
    padding: 24rpx;
  }
  .userInfoDom {
    background: #fff;
    margin: 24rpx;
    border-radius: 16rpx;
    padding: 24rpx;
  }
  .phoneDom {
    background: #fff;
    margin: 24rpx;
    border-radius: 16rpx;
    padding: 0 24rpx;
  }
  .uni-btn-v {
    margin: 60rpx 0;

    button {
      width: 702rpx;
      height: 88rpx;
      border: 2rpx solid rgba(0, 0, 0, 0);
      background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
      opacity: 1;
      border-radius: 44rpx;
      color: #fff;
      font-size: 36rpx;
    }
    .disable {
      background: none;
      background-color: #ddd;
      pointer-events: none;
    }
  }
}
.inputBox {
  font-size: 28rpx;
  position: relative;
  padding: 14rpx;
  margin-top: 10rpx;
  &.inputBox-hostipal {
    height: 86rpx;
    line-height: 86rpx;
    input {
      height: 86rpx;
      line-height: 86rpx;
    }
  }
  .title {
    font-size: 32rpx;
    width: 200rpx;
    float: left;
  }
  .content {
    width: 500rpx;
    right: 10rpx;
    float: right;
    text-align: right;
    span {
      display: inline-block;
      border: 1rpx solid #b2b2b2;
      opacity: 1;
      border-radius: 14rpx;
      padding: 10rpx 24rpx;
      margin: 6rpx;
    }
    .cur {
      border: 1px solid rgba(243, 78, 28, 1);
      position: relative;
      .curPostion {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 36rpx;
        height: 36rpx;
      }
    }
  }
  .tips {
    color: rgba(38, 128, 235, 1);
  }
}
.clear {
  clear: both;
  overflow: hidden;
  height: 0;
}
.illList {
  text-align: right;
  span {
    display: inline-block;
    padding: 8rpx 24rpx;
    margin: 10rpx 40rpx 10rpx 0;
    background-color: #fff;
    border: 1rpx solid #fee9e9;
    color: rgba(0, 0, 0, 0.55);
    position: relative;
    font-size: 28rpx;
    border-radius: 8rpx;
    background-color: #fee9e9;
    .illDeleteBtn {
      position: absolute;
      right: -20rpx;
      top: -20rpx;
      width: 40rpx;
      height: 40rpx;
      border: 1px solid #eee;
      border-radius: 40rpx;
      overflow: hidden;
      img {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
.textareaDom {
  margin-top: 20rpx;
  padding: 14rpx;
  background: #fff3ef;
  border-radius: 16rpx;
  font-size: 24rpx;
}
.cur {
  border: 1px solid rgba(243, 78, 28, 1);
  position: relative;
  .curPostion {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 36rpx;
    height: 36rpx;
  }
}
.lineHeight66 {
  height: 86rpx;
  line-height: 86rpx;
}
</style>
